import React from 'react';
import { Tag, Card, Table } from 'antd';

class CardContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      data: [],
    };
  }

  onRowClick(e) {
    var id = null;
    if (e.type == 3) {
      id = e.id;
    } else {
      id = e.tableId;
    }
    window.location.href='/table?id=' + id;
  }

  render() {

    const columns = [{
      title: '相关结果',
      key: '',
      dataIndex: '',
      width: '100%',
      render: (record) => (
        CardRender(record)
      ),
    }];

    const pagination = {
      total: this.state.data.length,
      showSizeChanger: true,
      pageSize: 4,
    };

    const CardRender = (record) => {
      if (record.type == 3) {
        return (
          <Card title={
            <div>
              <strong>{record.name}</strong>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <Tag color="blue">{record.dbName}</Tag>
            </div>
          } style={{width: '100%'}}>
            {record.comment}
          </Card>
        )
      } else if (record.type == 4) {
        return (
          <Card title={
            <div>
              <strong>{record.name}</strong>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <Tag color="blue">{record.dbName}</Tag>
            </div>
          } style={{width: '100%', background: '#F3FAF0'}}>
            {record.comment}
          </Card>
        )
      }
    }

    return (
      <div>
        <Table size="middle" columns={columns} pagination={pagination}
               dataSource={this.state.data} onRowClick={this.onRowClick.bind(this)}/>
      </div>
    );
  }
}

export default CardContainer;
